Scheduler for UWP | ComponentOne
Quick Start / Step 2 of 4: Adding Buttons
In This Topic
    Step 2 of 4: Adding Buttons
    In This Topic

    In this step, you'll add more XAML markup to your application. This markup will create the button elements that will control the C1Scheduler's view.

    1. Add the following XAML markup below the opening <Grid> tag. This will add row definition:
    Markup
    Copy Code
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    
    1. Below the Grid.RowDefinitions, add a general StackPanel control. The control should resemble the following markup:
    Markup
    Copy Code
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
        <StackPanel.Resources>
            <Style TargetType="Button" x:Key="btnStyle">
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="MinWidth" Value="100"/>
            </Style>
        </StackPanel.Resources>          
    </StackPanel>   
    
    1. Add four general Button controls, between </StackPanel.Resources> and </StackPanel> tags. Edit the markup so that it resembles the following. Note that each button has a Click event:
    Markup
    Copy Code
    <Button Click="DayClick" Style="{StaticResource btnStyle}">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="&#xe161;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
                <TextBlock Text=" Day" VerticalAlignment="Center"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Click="WorkWeekClick" Style="{StaticResource btnStyle}">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="&#xe162;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
                <TextBlock Text=" Work Week" VerticalAlignment="Center"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Click="WeekClick" Style="{StaticResource btnStyle}">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="&#xe162;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
                <TextBlock Text=" Week" VerticalAlignment="Center"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Click="MonthClick" Style="{StaticResource btnStyle}">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="&#xe163;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
                <TextBlock Text=" Month" VerticalAlignment="Center"/>
            </StackPanel>
        </Button.Content>
    </Button>           
    

    What You've Accomplished

    In this step you added markup for four button controls to your application. In the next step, you'll add code for the Button_Click events.  

    See Also